<script setup lang="ts">
interface LogoProps {
  size?: number
}

const props = withDefaults(defineProps<LogoProps>(), {
  size: 40
})
</script>

<template>
  <svg
    :width="props.size"
    :height="props.size"
    viewBox="0 0 120 120"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="logo-svg"
  >
    <!-- 背景圆形 -->
    <circle cx="60" cy="60" r="58" fill="url(#gradient)" />

    <!-- 书本图标 -->
    <path
      d="M35 45C35 42.7909 36.7909 41 39 41H59C61.2091 41 63 42.7909 63 45V75C63 77.2091 61.2091 79 59 79H39C36.7909 79 35 77.2091 35 75V45Z"
      fill="white"
      opacity="0.9"
    />
    <path
      d="M57 45C57 42.7909 58.7909 41 61 41H81C83.2091 41 85 42.7909 85 45V75C85 77.2091 83.2091 79 81 79H61C58.7909 79 57 77.2091 57 75V45Z"
      fill="white"
      opacity="0.9"
    />

    <!-- 书脊 -->
    <rect x="57" y="41" width="6" height="38" fill="url(#gradient2)" />

    <!-- 星星装饰 -->
    <path
      d="M48 30L49.5 34.5L54 36L49.5 37.5L48 42L46.5 37.5L42 36L46.5 34.5L48 30Z"
      fill="#FFD700"
    />
    <path
      d="M75 85L76 88L79 89L76 90L75 93L74 90L71 89L74 88L75 85Z"
      fill="#FFD700"
    />

    <!-- 渐变定义 -->
    <defs>
      <linearGradient id="gradient" x1="0" y1="0" x2="120" y2="120" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#4FACFE" />
        <stop offset="100%" stop-color="#00F2FE" />
      </linearGradient>
      <linearGradient id="gradient2" x1="60" y1="41" x2="60" y2="79" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#4FACFE" />
        <stop offset="100%" stop-color="#00D4FF" />
      </linearGradient>
    </defs>
  </svg>
</template>

<style scoped>
.logo-svg {
  filter: drop-shadow(0 2px 8px rgba(79, 172, 254, 0.3));
  transition: transform 0.3s ease;
}

.logo-svg:hover {
  transform: rotate(-5deg) scale(1.05);
}
</style>
